$(function () {
  // 1.登录界面显示和隐藏
  $('#loginBox a').on('click', function () {
    $('#loginBox').hide()
    $('#reBox').show()
  })
  $('#reBox a').on('click', function () {
    $('#reBox').hide()
    $('#loginBox').show()
  })

  // 2.定义校验规则
  let form = layui.form

  form.verify({
    username: [
      /^[\S]{1,10}$/,
      '用户名必须是1-10位字母和数字'
    ],
    password: [
      /^[\S]{6,15}$/,
      '密码长度必须是6-15位字母和数字'
    ],
    // 确认密码规则
    repassword: function (value) {
      // value就是你给哪个标签添加这个校验规则，
      // 这个标签的值就赋值给value
      // console.log(value);
      let pwd = $('#reBox input[name=password]').val();
      // 如果原密码的值和确认密码的值不一致就报错
      if (value !== pwd) {
         return '两次密码输入不一致'
      }
    }
  })

  // 3.注册功能
  let layer = layui.layer
  $('#formReg').on('submit', function (e) {
    // 阻止表单默认提交
    e.preventDefault();
    axios({
      method:'POST',
      url:'/api/reguser',
      data: $(this).serialize()
    }).then(res => {
      // console.log(res.data);
      // 判断返回数据是否正确
      if (res.data.status !== 0) {
        return   layer.alert(res.data.message, {icon: 2});
      }
      // 成功后提示
      layer.alert('恭喜您，注册成功', { icon: 1 })
      // 切换到登录模块
      $('#reBox a').click();
      // 清空表单 - dom元素中,有一个  reset可以重置表单
      $('#formReg')[0].reset();
    })
  })

  $('#formLogin').on('submit', function (e) {
    e.preventDefault();
    axios({
      method: 'POST',
      url: '/api/login',
      data: $('#formLogin').serialize()
    }).then(res => {
      console.log(res.data);
      if (res.data.status !== 0) {
        return layer.msg(res.data.message, {icon: 2});
      }
      layer.msg('恭喜您，登录成功', { icon: 1 })
      localStorage.setItem('token', res.data.token)
      location.href = '/index.html'
    })
  })

})